<template>
  <a-card :bordered="false" title="薪酬配置 - 非年薪制">
    <!-- 基本信息配置 -->
    <a-card title="基本信息配置" :bordered="false">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="基本工资（月）">
            <a-input v-model="monthlySalary" placeholder="请输入月薪" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <!-- 福利费模块 -->
    <a-card title="福利费" :bordered="false" style="margin-top: 16px">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="高温补贴">
            <a-input v-model="heatAllowance" placeholder="请输入高温补贴金额" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="住房补贴">
            <a-input v-model="housingAllowance" placeholder="请输入住房补贴金额" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <!-- 五险二金 -->
    <a-card title="五险二金缴费比例" :bordered="false" style="margin-top: 16px">
      <a-table :columns="insuranceColumns" :dataSource="insuranceData"></a-table>
    </a-card>

    <!-- 操作按钮 -->
    <a-card :bordered="false" style="text-align: right; margin-top: 16px">
      <a-button type="primary" @click="handleAdd">新增</a-button>
      <a-button type="primary" style="margin-left: 8px" @click="handleSave">保存</a-button>
    </a-card>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      monthlySalary: '',
      heatAllowance: '',
      housingAllowance: '',
      insuranceColumns: [
        { title: '缴费类型', dataIndex: 'type', key: 'type' },
        { title: '个人缴费比例', dataIndex: 'personalRate', key: 'personalRate' },
        { title: '单位缴费比例', dataIndex: 'companyRate', key: 'companyRate' },
      ],
      insuranceData: [
        { type: '养老保险', personalRate: '12%', companyRate: '20%' },
        { type: '医疗保险', personalRate: '2%', companyRate: '6%' },
        { type: '失业保险', personalRate: '1%', companyRate: '2%' },
      ],
    };
  },
  methods: {
    handleAdd() {
      this.$message.success('新增数据');
    },
    handleSave() {
      this.$message.success('保存成功');
    },
  },
};
</script>

<style scoped>
/* 适当的样式调整 */
</style>
